<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="24">
                <el-row :gutter="20" class="mgb20">
                    <!-- 今日新增会员 -->
                    <el-col :span="8">
                        <el-card shadow="hover">
                            <div class="grid-content grid-con-1">
                                <i class="el-icon-view grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div>
                                        <el-popover placement="right" trigger="click">
                                            <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
                                            <div id="main"></div>
                                            <el-button @click="loadData" slot="reference">今日新增会员数量</el-button>
                                        </el-popover>
                                    </div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <!-- 新增订单数 -->
                    <el-col :span="8">
                        <el-card shadow="hover">
                            <div class="grid-content grid-con-2">
                                <i class="el-icon-message grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div>
                                        <el-popover placement="right" trigger="click">
                                            <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
                                            <div id="a" style="width: 600px;height:400px;"></div>
                                            <el-button @click="orderNum()" slot="reference">今日新增订单数量</el-button>
                                        </el-popover>
                                    </div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <!-- 洗车订单金额 -->
                    <el-col :span="8">
                        <el-card shadow="hover">
                            <div class="grid-content grid-con-3">
                                <i class="el-icon-goods grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div>
                                        <el-popover placement="right" trigger="click">
                                            <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
                                            <div id="main2"></div>
                                            <el-button @click="loadData2" slot="reference">洗车订单金额</el-button>
                                        </el-popover>
                                    </div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>

                <el-row :gutter="20" class="mgb20">
                    <!-- 累计会员总数  -->
                    <el-col :span="8">
                        <el-card shadow="hover">
                            <div class="grid-content grid-con-4">
                                <i class="el-icon-view grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div>累计会员总数：{{ total }}</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <!-- 累计订单数量 -->
                    <el-col :span="8">
                        <el-card shadow="hover">
                            <div class="grid-content grid-con-5">
                                <i class="el-icon-message grid-con-icon"></i>
                                <div class="grid-cont-right">
                                   <div>累计订单数量：{{ orderAll.value}}</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <!-- 累计订单收入 -->
                    <el-col :span="8">
                        <el-card shadow="hover">
                            <div class="grid-content grid-con-6">
                                <i class="el-icon-goods grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div>累计订单收入：{{ cumulativeTotal }}元</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>

                <el-row :gutter="20" class="mgb20">
                    <!-- 每日所有门店洗车订单 -->
                    <el-col :span="8">
                        <el-card shadow="hover">
                            <div class="grid-content grid-con-7">
                                <i class="el-icon-view grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div>
                                        <el-popover placement="right" trigger="click">
                                            <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
                                            <div id="carWash">
                                                <el-date-picker style="margin-left: 100px;" v-model="queryTime" type="date" placeholder="选择月"
                                                    @change="changeMonth">
                                                </el-date-picker>
                                                <div id="chart-container" style="width: 600px; height: 400px"></div>
                                            </div>
                                            <el-button @click="CarWash" slot="reference">每日所有门店洗车订单</el-button>
                                        </el-popover>
                                    </div>


                                </div>
                            </div>
                        </el-card>
                    </el-col>

                    <el-col :span="8">
                        <el-card shadow="hover">
                            <div class="grid-content grid-con-8">
                                <i class="el-icon-message grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div>留言反馈</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>

            </el-col>
        </el-row>
    </div>
</template>

<script>
import axios from "axios";
export default {

    data() {
        return {
            queryTime: "",
            xdata: [],//定义x轴数据集合
            ytoday: [], //y轴添加日志数据
            yweekday: [], //y轴添加日志数据
            ymonthday: [], //y轴添加日志数据
            yyearday: [], //y轴添加日志数据
            total: '',//用户总数量
            xdate: [],//洗车订单日期
            ydailyTotal: [],//每日洗车订单金额
            cumulativeTotal: '',//累计订单总金额
            orderAll:[],//累计洗车订单总数
            carOrder:[],//累计每日订单数量
        }
    },
    created() {
        //在初始化时，调用加载数据方法
        this.loadData2();
        this.mounted();
        //this.drawChart();
        this.loadData();
        this.totalMoney();
        this.orderCount()
    },
    created: function () {
        //给当前日期选择框初始化日期为当前月 不选择时，默认显示当前月份
        let date = new Date();
        //如果当前月份加上1小于10说明月份是个位 前面拼接上一个0
        // alert(date.getMonth())//比当前月份小1
        this.queryTime =
            date.getFullYear() +
            "-" +
            (date.getMonth() + 1 < 10
                ? "0" + (date.getMonth() + 1)
                : date.getMonth() + 1) +
            "-" + (date.getDate() < 10 ? "0" + date.getDate() : date.getDate())

        this.getDailyCheckoutStatistics();
    },
    mounted() {
        this.drawChart();
        this.drawChart2();
        this.orderCount()

    },
    methods: {//使用的所有方法
        //封装加载数据的方法   初始化和年月发生改变时，都可以调用
        loadData() {
            //使用axios发请求到后台方法
            var _this = this;
            //赋值 axios官网代码
            _this.$http.get('/tuser/annualQuery')  //指定请求的url及参数  get
                .then(function (response) {  //正确返回对象的处理
                    //JSON.stringify   把json转换为json字符串，方便查看
                    //判断返回值是否正确
                    if (response.data.code == 200) {
                        //当加载数据方法请求正确时，执行echarts显示
                        //alert(JSON.stringify(response.data.data));
                        //给图片中的数据动态赋值
                        let jsonDataList = response.data.data;
                        _this.total = response.data.data[0].total;
                        //alert(response.data.data[0].total)
                        //因为有缓存，每次重新执行后，都要把原来数据清空
                        _this.xdata = [];
                        _this.ytoday = [];
                        _this.yweekday = [];
                        _this.ymonthday = [];
                        _this.yyearday = [];
                        // jsonDataList = [{"monthDay":"05-01","addCount":2,"updateCount":1,"delCount":3},{"monthDay":"05-02","addCount":1,"updateCount":2,"delCount":1},{"monthDay":"05-03","addCount":0,"updateCount":2,"delCount":1},{"monthDay":"05-04","addCount":1,"updateCount":0,"delCount":0}]
                        for (let i = 0; i < jsonDataList.length; i++) {
                            //拿出循环的每个对象给jsonDataListElement
                            const jsonDataListElement = jsonDataList[i];//第1次：{"monthDay":"05-01","addCount":2,"updateCount":1,"delCount":3} 。。。
                            //给xdata  ydata ...赋值
                            //_this.xdata.push(jsonDataListElement.monthDay);
                            _this.ytoday.push(jsonDataListElement.today);
                            _this.yweekday.push(jsonDataListElement.weekday);
                            _this.ymonthday.push(jsonDataListElement.monthday);
                            _this.yyearday.push(jsonDataListElement.yearday);

                        }
                    }
                    _this.drawChart();

                })
        },
        orderNum(){
            var _this=this;
            _this.$http.get('/checkoutInfo/queryOrderTime')
                .then(function (response){
                    if(response.data.code==200){
                        let mapList=response.data.data
                        _this.orderAll={};
                        _this.carOrder={};
                        for(let i=0;i<mapList.length;i++){
                            const jsonDataListElement=mapList[i]
                            _this.orderAll={"name":"所有订单","value":jsonDataListElement.orderTotal};
                            _this.carOrder={"name":"今日订单","value":jsonDataListElement.orderNum};
                        }
                        // alert(JSON.stringify(_this.carOrder))
                        _this.orderCount();
                    }
                })
        },
        orderCount(){
                 // 基于准备好的dom，初始化echarts实例
                 var myEchart = this.$echarts.init(document.getElementById("a"));
                 var option={
                    tooltip: {
	                    trigger: 'item'
	                        },
                    legend:{
                      data:['总订单数'], 
                    },
                    series: [
                    {
                        name:['总订单数'],
                        //形状类型
                        type:'pie',
                         // radius: '50%',  // 设置饼状图大小，100%时，最大直径=整个图形的min(宽，高)
                        radius: ['50%', '70%'],
                        //是否启用防止标签重叠策略，默认开启，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠
                        avoidLabelOverlap: false,
                        label: {
                            //是图形在默认状态下的样式,加上这个属性和不加这个属性样式都是一样的
                            normal: {
                                formatter: '{b}:{c}' + '\n\r' + '({d}%)',
                                show: true,
                                position: 'left'
                            },
                            emphasis: {
                                //显示数据点
                                show: true,
                                textStyle: {
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: true
                            }
                        },
                        data:[this.orderAll,this.carOrder]
                        }
                    ]   
        
                }

            myEchart.setOption(option);
        },
        //显示图表的方法
        drawChart() {
            // 基于准备好的dom，初始化echarts实例
            var myEchart = this.$echarts.init(document.getElementById("main"));
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: "新增用户统计"
                },
                tooltip: {
                    trigger: 'axis'
                },
                toolbox: {
                    show: true,
                    feature: {
                        saveAsImage: { show: true }
                    }
                },
                calculable: true,
                xAxis: {
                    type: 'category',
                    //xdata:this.xdata
                    xdata: ['今日新增', '今周新增', '今月新增', '今年新增']
                },
                legend: {
                    data: ['今日新增', '今周新增', '今月新增', '今年新增']
                },
                yAxis: {
                    type: 'value',
                    minInterval: 1
                },
                grid: {
                    top: "10%",
                    left: "2%",
                    right: "2%",
                    bottom: "10%",
                    containLabel: true,
                },
                series: [
                    {
                        name: '今日新增',
                        type: 'bar',
                        data: this.ytoday,
                        markPoint: {
                            data: [
                                { type: 'max', name: 'Max' },
                                { type: 'min', name: 'Min' }
                            ]
                        },
                        markLine: {
                            data: [{ type: 'average', name: 'Avg' }]
                        }
                    },
                    {
                        name: '今周新增',
                        type: 'bar',
                        data: this.yweekday,
                        markPoint: {
                            data: [
                                { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
                                { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
                            ]
                        },
                        markLine: {
                            data: [{ type: 'average', name: 'Avg' }]
                        }
                    },
                    {
                        name: '今月新增',
                        type: 'bar',
                        data: this.ymonthday,
                        markPoint: {
                            data: [
                                { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
                                { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
                            ]
                        },
                        markLine: {
                            data: [{ type: 'average', name: 'Avg' }]
                        }
                    },
                    {
                        name: '今年新增',
                        type: 'bar',
                        data: this.yyearday,
                        markPoint: {
                            data: [
                                { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
                                { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
                            ]
                        },
                        markLine: {
                            data: [{ type: 'average', name: 'Avg' }]
                        }
                    }
                ]
            };
            myEchart.setOption(option);
        },
        //封装加载数据的方法   初始化和年月发生改变时，都可以调用
        loadData2() {
            //使用axios发请求到后台方法
            var _this = this;
            //赋值 axios官网代码
            _this.$http.post('/checkoutInfo/queryOrderDay?date=' + this.selectedDate)  //指定请求的url及参数  get
                .then(function (response) {  //正确返回对象的处理
                    //JSON.stringify   把json转换为json字符串，方便查看
                    //判断返回值是否正确
                    if (response.data.code == 200) {
                        //当加载数据方法请求正确时，执行echarts显示
                        //给图片中的数据动态赋值
                        let jsonDataList = response.data.data;
                        //alert(JSON.stringify(response.data.data));
                        //因为有缓存，每次重新执行后，都要把原来数据清空
                        _this.xdate = [];//洗车订单日期
                        _this.ydailyTotal = [];//每日洗车订单总金额
                        // jsonDataList = [{"monthDay":"05-01","addCount":2,"updateCount":1,"delCount":3},{"monthDay":"05-02","addCount":1,"updateCount":2,"delCount":1},{"monthDay":"05-03","addCount":0,"updateCount":2,"delCount":1},{"monthDay":"05-04","addCount":1,"updateCount":0,"delCount":0}]
                        for (let i = 0; i < jsonDataList.length; i++) {
                            //拿出循环的每个对象给jsonDataListElement
                            const jsonDataListElement = jsonDataList[i];//第1次：{"monthDay":"05-01","addCount":2,"updateCount":1,"delCount":3} 。。。
                            //给xdata  ydata ...赋值
                            //_this.xdata.push(jsonDataListElement.monthDay);
                            _this.xdate.push(jsonDataListElement.date);
                            _this.ydailyTotal.push(jsonDataListElement.dailyTotal);
                        }
                    }
                    _this.drawChart2();
                    _this.totalMoney();
                })
        },
        //显示图表的方法
        drawChart2() {
            // 基于准备好的dom，初始化echarts实例
            var myEchart = this.$echarts.init(document.getElementById("main2"));
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: "每日洗车订单总金额",
                    subtext: "",
                    left: "center",
                },
                tooltip: {
                    trigger: "axis", //当鼠标放到数据条的轴上，数据内容就会显示
                    axisPointer: {
                        type: "cross",
                        label: {
                            backgroundColor: "#6a7985",
                        },
                    },
                },
                xAxis: {
                    type: "category",
                    data: this.xdate,
                    axisLabel: {
                        rotate: 45,
                        interval: 0,
                    },
                },
                yAxis: {
                    type: "value",
                    name: "洗车金额",
                },
                series: [
                    {
                        name: "洗车金额",
                        type: "line",
                        data: this.ydailyTotal,
                    },
                ],
            };
            myEchart.setOption(option);
        },
        totalMoney() {
            //alert(11111111111111111)
            //使用axios发请求到后台方法
            var _this = this;
            _this.$http.post('/checkoutInfo/queryOrderTotal').then(function (response) {
                if (response.data.code == 200) {
                    _this.cumulativeTotal = response.data.data[0].cumulativeTotal;
                    //alert(JSON.stringify(response.data.data[0].cumulativeTotal))
                }
            })
        },
        //年月发生变化时的方法
        changeMonth(v) {
            let year = v.getFullYear();
            let month = v.getMonth() + 1;
            let day = v.getDate();
            this.queryTime = year + "-" + (month < 10 ? "0" + month : month) + "-" + (day < 10 ? "0" + day : day);
            //月发生变化时，给monthDay重新赋值后，再次执行加载数据方法
            this.getDailyCheckoutStatistics();
        },

        getDailyCheckoutStatistics() {
            axios
                .get("/checkoutInfo/statistics?date=" + this.queryTime)
                .then((response) => {
                    const data = response.data;
                    this.renderChart(data);
                })
                .catch((error) => {
                    console.error(error);
                });
        },

        renderChart(data) {
            const chartContainer = document.getElementById("chart-container");
            const myChart = this.$echarts.init(chartContainer);

            const xAxisData = data.map((item) => item.storeName);
            const seriesData = data.map((item) => item.count);
            const options = {
                title: {
                    text: "每日店铺洗车统计",
                    subtext: "按日期和店铺分组统计",
                    left: "center",
                },
                tooltip: {
                    trigger: "axis", //当鼠标放到数据条的轴上，数据内容就会显示
                    axisPointer: {
                        type: "cross",
                        label: {
                            backgroundColor: "#6a7985",
                        },
                    },
                },
                xAxis: {
                    type: "category",
                    data: xAxisData,
                    axisLabel: {
                        rotate: 45,
                        interval: 0,
                    },
                },
                yAxis: {
                    type: "value",
                    name: "洗车次数",
                },
                series: [
                    {
                        name: "洗车次数",
                        type: "bar",
                        data: seriesData,
                    },
                ],
            };

            myChart.setOption(options);
        },

    }
}
</script>


<style scoped>
#main {
    width: 700px;
    height: 500px;
    margin: auto;
}

#main2 {
    width: 700px;
    height: 500px;
    margin: 20px auto;
    margin-top: 100px;
}
#carWash{
    width: 700px;
    height: 500px;
    margin: auto;
    margin-top: 100px
}

.el-row {
    margin-bottom: 20px;
}

.grid-content {
    display: flex;
    align-items: center;
    height: 100px;
}

.grid-cont-right {
    flex: 1;
    text-align: center;
    font-size: 15px;
    color: #999;
}

.grid-num {
    font-size: 30px;
    font-weight: bold;
}

.grid-con-icon {
    font-size: 50px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #fff;
}

.grid-con-1 .grid-con-icon {
    background: rgb(64, 132, 206);
}

.grid-con-1 .grid-num {
    color: rgb(64, 132, 206);
}

.grid-con-2 .grid-con-icon {
    background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
    background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
    color: rgb(242, 94, 67);
}

.grid-con-4 .grid-con-icon {
    background: rgb(97, 178, 224);
}

.grid-con-4 .grid-num {
    color: rgb(97, 178, 224);
}

.grid-con-5 .grid-con-icon {
    background: rgb(197, 76, 102);
}

.grid-con-5 .grid-num {
    color: rgb(197, 76, 102);
}

.grid-con-6 .grid-con-icon {
    background: rgb(69, 233, 233);
}

.grid-con-6 .grid-num {
    color: rgb(69, 233, 233);
}

.grid-con-7 .grid-con-icon {
    background: rgb(219, 205, 79);
}

.grid-con-7 .grid-num {
    color: rgb(219, 205, 79);
}

.grid-con-8 .grid-con-icon {
    background: rgb(137, 99, 207);
}

.grid-con-8 .grid-num {
    color: rgb(137, 99, 207);
}

.user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
}

.user-avator {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 14px;
    color: #999;
}

.user-info-cont div:first-child {
    font-size: 30px;
    color: #222;
}

.user-info-list {
    font-size: 14px;
    color: #999;
    line-height: 25px;
}

.user-info-list span {
    margin-left: 70px;
}

.mgb20 {
    margin-bottom: 20px;
}

.todo-item {
    font-size: 14px;
}

.todo-item-del {
    text-decoration: line-through;
    color: #999;
}

#chart-container {
    margin: 20px auto;
}
</style>
